<template>
  <el-row>
    <div style="margin-top: 15px">
      <el-image :src="require('@/assets/'+info.imgSrc)"
                style="width: 150px;height:150px; display: block;margin: auto;"></el-image>
    </div>
    <div style="margin-top: 15px">
      <p style=" text-align: center;font-size: 30px">{{info.title}}</p>
    </div>
    <div style="margin-top: 15px;width: 100%">
      <div style="margin-left:auto;margin-right:auto;width: 300px;height: 80px">
        <el-image :src="require('@/assets/gitee.png')" @click="clickGitee"
                  style="width: 50px;height:50px;margin-left: 95px;cursor : pointer;"></el-image>
        <el-image :src="require('@/assets/github.png')" @click="clickGithub"
                  style="width: 50px;height:50px;margin-left: 15px;cursor : pointer;"></el-image>
      </div>
    </div>
    <div style="width: 100%;height: 330px;background-color: #9c9ca2">
      <div style="height:100%;width:100%;margin-left: auto;margin-right: auto">
        <div style="display: flex;justify-content: center;">
          <template v-for="item of configList" v-if="configList.length!=0">
            <div class="card-container" style="width: 400px">
              <el-card class="box-card col">
                <div slot="header" class="clearfix">
                  <el-image :src="require('@/assets/'+item.imgSrc)"
                            style="width: 25px;height: 25px;margin-left: 5px;cursor : pointer;"
                            @click="clickCard(item)" class="upCenter"></el-image>
                  <span class="upCenter" @click="clickCard(item)" style="cursor : pointer;">{{ item.head }}</span>
                </div>
                <div class="text item">
                  <div class="upCenter title" @click="clickCard(item)" style="cursor : pointer;">{{ item.title }}
                  </div>
                  <div class="upCenter content" @click="clickCard(item)" style="cursor : pointer;">
                    服务器：{{ item.ip }}
                  </div>
                  <div class="upCenter content" @click="clickCard(item)" style="cursor : pointer;">
                    端口：{{ item.host }}
                  </div>
                  <div class="upCenter content">
                    <el-image :src="require('@/assets/'+item.example)"
                              style="width: 340px;height: 170px;display: block; margin: auto;cursor : pointer;"
                              class="lineCenter"
                              :preview-src-list="imgList">
                    </el-image>
                  </div>
                </div>
              </el-card>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="navbar">
      <a
          class="navbar-content"
          href="https://beian.miit.gov.cn/"
          target="_blank">{{info.filingNo}}
      </a>
    </div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      info:{},
      configList: [],
      imgList: [],
      name: null,
      img: '',
    }
  },
  created() {
    this.getObjectURL('@/assets/blog.png')
    let _this = this
    _this.imgList = []
    this.$http.get("/web.json").then((result) => {
      _this.info = result.data
      _this.configList = result.data.websiteList
      for (const item of _this.configList) {
        _this.imgList.push(require('@/assets/' + item.example))
      }
    });
  },
  methods: {
    clickCard(item) {
      // console.log('https://'+item.ip+'/'+item.host)
      window.open('http://' + item.ip + ':' + item.host, '_blank')
      // window.open('http://' + item.url, '_blank')      //域名备案成功后使用
    },
    getObjectURL(file) {
      let binaryData = [];
      binaryData.push(file);
      return window.URL.createObjectURL(new Blob(binaryData))
    },
    clickGitee() {
      window.open(this.info.giteeUrl, '_blank')
    },
    clickGithub() {
      window.open(this.info.githubUrl, '_blank')

    },
  },

}
</script>
<style lang="less" scoped>
.lineCenter {
  margin-left: auto;
  margin-right: auto;
}

.upCenter {
  margin-top: auto;
  margin-bottom: auto;
}

.col {
  margin: 10px;
}

.clearfix {
  display: flex;
  text-align: left;
  border: 0;
  color: #9B9B9B;
  font-weight: bold;
}

.text {
  font-size: 14px;
  color: #9B9B9B;
}

.item {
  margin-bottom: 5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.content {
  margin-top: 5px;
}

.card-container {
  /deep/ .el-card__header {
    padding: 5px 5px;
  }

  /deep/ .el-card__body {
    padding: 5px;
  }
}
.navbar {
  text-align: center;
  overflow: hidden;
  background-color: #808080;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
}
.navbar-content {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
</style>
